import React, {useEffect, useState} from "react"
import {Upload} from "antd"
import {read} from "zr-react-toolbox"
import LoadingOutlined from "@ant-design/icons/es/icons/LoadingOutlined"
import PlusOutlined from "@ant-design/icons/lib/icons/PlusOutlined"
import getBase64 from "../image_ase64"
import PropTypes from 'prop-types'
import "./multiple.less"
import CloudUploadOutlined from "@ant-design/icons/lib/icons/CloudUploadOutlined";

const defaultItemRender = (item, valueToUrl) => {
	return <div className={'zr-multiple-uploader-item'}>
		<img src={valueToUrl(item)} alt="fabric" style={{width: '100px'}}/>
	</div>
}

const MultipleImageUploader = (props) => {
	const [loading, $loading] = useState(false)
	const [url, $url] = useState()
	const [files, $files] = useState({})

	const {onChange, valueToUrl, value, data, ...inherit} = props

	const uploadButton = (
		<div className={'zr-multiple-uploader-button'}>
			<CloudUploadOutlined/>
			<div className="ant-upload-text">上传图片</div>
		</div>
	)

	const onFileChange = ({file, event}) => {
		files[file.uid] = file
		$files(files)
		$loading(file.status === 'uploading')
		if (file.status === 'done') {
			onChange((value || []).concat(`http://api.ld006.com:8080/file/image/7c0fa54b4e3c11eaaf3b0242c0a83002`))
			getBase64(file.originFileObj, (url) => {
				$url(url)
				$loading(false)
			})
		}
	}

	console.info(files,'000000')

	return (
		<div className={'zr-multiple-uploader'}>
			{(value || []).map(v => defaultItemRender(v, valueToUrl))}
			{
				(value || []).length >= 8 ? undefined
					: <Upload
						{...inherit}
						accept={'image/* '}
						multiple={false}
						withCredentials={true}
						data={data}
						listType="picture-card"
						showUploadList={false}
						onChange={onFileChange}
					>
						{uploadButton}
					</Upload>
			}
		</div>

	)
}

MultipleImageUploader.propTypes = {
	/**上传服务器地址*/
	action: PropTypes.string.isRequired,
	/**设置值,一般为已有服务器已有图片id列表*/
	value: PropTypes.array,
	/**每张图片的渲染*/
	itemRender: PropTypes.element,
	/**上传按钮*/
	buttonRender: PropTypes.element,
	/**最大上传数量*/
	maxSize: PropTypes.number,
	/**通过值铆取一个已有图片地址函数*/
	valueToUrl: PropTypes.func,
	/**上传所需额外参数或返回上传额外参数的方法*/
	data: PropTypes.object
}

//单张图片上传
export default MultipleImageUploader